<template>
  <div class="test_wrapper" @dragover="dragover($event)">
    <div class="leftBox">
      <el-row
        class="sort-item-left"
        :gutter="24"
      >
        <el-col class="sort-item-name" v-for="i in 44" :key="i" :span="6">
          <span> </span>
        </el-col>
      </el-row>
    </div>
    <div class="rightBox">
      <transition-group name="sort">
        <el-row
          v-for="(item, index) in state.emptyArray"
          :key="index"
          class="sort-item"
          :class="'sort-item-'+index"
          :draggable="true"
          @dragstart="dragstart(emptyArrayNoleft[index],index)"
          @dragenter="dragenter(emptyArrayNoleft[index], index, $event)"
          @dragend="dragend(emptyArrayNoleft[index], $event)"
          @dragover="dragover($event)"
        >
          <el-col class="sort-item-name" @click="delItem(index)">
            <span >
              {{ item }}
            </span>
          </el-col>
        </el-row>
      </transition-group>
    </div>
    
  </div>
</template>

<script setup>
import { emptyArrayNoleft } from '../../public/dataList.js'
import { reactive, defineProps, watch, watchEffect } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
const props = defineProps({
  tableData: {
    type: Array,
    default:()=>{
      []
    }
  },
  checkedLeft: {
    type: String
  }
});

// const emits = defineEmits(['done']);
const state = reactive({
  oldData: [], // 开始排序时按住的旧数据
  newData: [], // 拖拽过程的数据 // 列表数据
  tableData: props.tableData,
  checkedLeft: props.checkedLeft,
  emptyArray: emptyArrayNoleft,
});

console.log(state.emptyArray)

const dragstart = (value, index) => {
  console.log(value);
  console.log(state.oldData);
  state.oldData = value?value:index;
};

// 记录移动过程中信息
const dragenter = (value, index, e) => {
  state.newData = isNaN(value)?value:index;
  console.log(state.newData, value, index)
  e.preventDefault();
};

// 拖拽最终操作
const dragend = async () => {
  if (state.oldData !== state.newData) {
    let oldIndex = '';
    
    
    const newIndex = isNaN(state.newData)?state.tableData.indexOf(state.newData):state.newData;
    const newItems = [...state.tableData];

    
    if(isNaN(state.oldData)){
      // 判断是否为数字，非数字表明有值
      oldIndex = state.tableData.indexOf(state.oldData);
      // 删除老的节点
      newItems.splice(oldIndex, 1);
      console.log('这里不不不不是数字哦：'+oldIndex)
    }else{
      // 数字表明空值
      oldIndex = state.oldData;
      console.log('这里是数字哦：'+oldIndex)
    }
    
    // 在列表中目标位置增加新的节点
    newItems.splice(newIndex, 0, isNaN(state.oldData)?state.oldData:' ');


    state.tableData = [...newItems];
    state.tableData.forEach((val, index) => {
      state.emptyArray[index] = val
    });

    console.log(1111)
    // emits('done', state.tableData);
  }
};

// 拖动事件（主要是为了拖动时鼠标光标不变为禁止）
const dragover = (e) => {
  e.preventDefault();
};

// 删除多余空格
const delItem = (index)=>{
  console.log(index)
  console.log(state.emptyArray)
  debugger;
  ElMessageBox.alert('确认删除', '删除', {
    confirmButtonText: 'OK',
    callback: () => {
      console.log(state)
      state.tableData.splice(index,1);
      state.tableData.splice(200, 0, ' ');
      state.emptyArray.splice(index, 1);
      state.emptyArray.splice(200, 0, ' ');
    },
  })
}

// 获取分组数据
// const getGroupData = (tableData) => {
//   nextTick(() => {
//     state.tableData = [{resourceId: 1, contentName: 'nad'}]
//   })
// };

watch(
  () => props.tableData,
  (val) => {
    state.tableData = [...val];
    for(let i=0; i<200; i++){
      state.emptyArray[i] = state.tableData[i]
    }
    console.log(state.emptyArray)
  },
  {
    deep: true
  }
);


// watchEffect(() => {
//   state.tableData = props.tableData;
//   console.log(state.tableData)
// });

watchEffect((onInvalidate) => {
  // 异步api调用，返回一个操作对象
  onInvalidate(() => {
    // 取消异步api的调用。
    // apiCall && apiCall.cancel();
  });
});

// defineExpose({getGroupData})
</script>

<style scoped lang="less" >
.sort-move {
  transition: transform 0.3s;
}
.test_wrapper {
  width: 100%;
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  .leftBox{
    width: 260px;
    margin-right: 40px;
    .sort-item-left{
      .sort-item-name{
        width: 65px !important;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        color: #000;
        padding: 0px 2px;
        box-sizing: border-box;
        margin: 0;
        background-color: #fff;
        border: 1px solid;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    
  }
  .rightBox{
    width: calc(100% - 300px);
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .sort-item {
      width: 65px !important;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      color: #000;
      padding: 0px 2px;
      box-sizing: border-box;
      margin: 0;
      background-color: #fff;
      border: 1px solid;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      &-name {
        .el-input {
          width: 90%;
        }
        /deep/.el-input__inner {
          padding-left: 0;
        }
        .noneBorder {
          /deep/ .el-input__inner {
            border: none;
          }
        }
      }
    }
    .sort-item:nth-of-type(17n-4){
      margin-right: 40px;
    }
    .sort-item:nth-of-type(232){
      margin-left: 300px;
    }
    .sort-item:nth-of-type(235){
      margin-right: 0px;
    }
    .sort-item:hover {
      background-color: #dfdfdf;
    }
  }
  
}
</style>